<template>
  <div id="app">
    <div class=" column">
      <!-- 概览 -->
      <div class="overview panel">
        <div class="inner">
          <ul>
            <li>
              <h4>2,190</h4>
              <span>设备总数</span>
            </li>
            <li>
              <h4>190</h4>
              <span>季度新增</span>
            </li>
            <li>
              <h4>3,001</h4>
              <span>运营设备</span>
            </li>
            <li>
              <h4>108</h4>
              <span>异常设备</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 监控 -->
      <div class="panel monitor">
        <div class="inner"></div>
      </div>
      <!-- 点位 -->
      <div class="point panel">
        <div class="inner">
          <h3>点位分布统计</h3>
          <div class="chart">
            <div class="pie" id="pointPie"></div>
            <div class="data">
              <div class="item">
                <h4>320.11</h4>
                <span>
                  <i></i>
                  点位总数
                </span>
              </div>
              <div class="item">
                <h4>418</h4>
                <span>
                  <i></i>
                  本月新增
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <!-- 地图 -->
      <div class="map panel">
        <div class="inner">
          <h3>
            <span></span>
            设备数据统计
          </h3>
          <div class="chart">
            <!-- 绘制地图 -->
            <div class="geo" id="geo"></div>
          </div>
        </div>
      </div>
      <!-- 用户 -->
      <div class="users panel">
        <div class="inner">
          <h3>全国用户总量统计</h3>
          <div class="chart">
            <!-- 绘制用户柱状图 -->
            <div class="bar" id="usersBar"></div>
            <div class="data">
              <div class="item">
                <h4>120,899</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  用户总量
                </span>
              </div>
              <div class="item">
                <h4>248</h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19"></i>
                  本月新增
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <!-- 订单 -->
      <div class="order panel">
        <div class="inner"></div>
      </div>
      <!-- 销售 -->
      <!-- 销售额 -->
      <div class="sales panel">
        <div class="inner">
          <div class="caption">
            <h3>销售额统计</h3>
            <a
              v-for="item in sales"
              :key="item.title"
              @click="handleSalesClick(item)"
              :class="active === item.title ? 'active' : ''"
              >{{ item.title }}</a
            >
          </div>
          <div class="chart">
            <div class="label">单位:万</div>
            <div class="line" id="lineChart"></div>
          </div>
        </div>
      </div>
      <div class="wrap">
        <!-- 渠道 -->
        <channel></channel>
        <!-- 季度 -->
        <quarter></quarter>
      </div>
      <!-- 排行 -->
      <div></div>
    </div>
  </div>
</template>

<script>
import Channel from "./components/box/channel.vue";
import Quarter from "./components/box/quarter.vue";
import { mapOption } from "./components/box/options/mymap";
import chinaJson from "./utils/china.json";
export default {
  name: "App",
  components: {
    Channel,
    Quarter,
  },
  data() {
    return {
      active: "月",
      sales: [
        {
          title: "年",
          data: {
            x: ["2011", "2012", "2013", "2014", "2015"],
            value1: [134, 90, 230, 210, 230],
            value2: [213, 180, 200, 180, 79],
          },
        },
        {
          title: "季",
          data: {
            x: ["春", "夏", "秋", "冬"],
            value1: [90, 230, 210, 134, 230],
            value2: [200, 180, 213, 180, 79],
          },
        },
        {
          title: "月",
          data: {
            x: [
              "一月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            value1: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            value2: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
          },
        },
        {
          title: "周",
          data: {
            x: ["一周", "二周"],
            value1: [210, 230],
            value2: [213, 180],
          },
        },
      ],
      lineChart: null,
      lineOption: {
        tooltip: {
          trigger: "axis",
        },
        color: ["#00f2f1", "#ed3f35"],
        legend: {
          textStyle: {
            color: "#4c9bfd", // 图例文字颜色
          },
          right: "10%", // 距离右边10%
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, // 去除刻度
          },
          axisLabel: {
            color: "#4c9bfd", // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a", // 分割线颜色
            },
          },
        },
        series: [
          {
            name: "预期销售额",
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            type: "line",
            // 折线修饰为圆滑
            smooth: true,
          },
          {
            name: "实际销售额",
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            type: "line",
            smooth: true,
          },
        ],
      },
    };
  },
  mounted() {
    this.renderPonitPie("pointPie");
    // 中间省略的数据  准备三项
    let item = {
      name: "",
      value: 1200,
      // 柱子颜色
      itemStyle: {
        color: "#254065",
      },
      // 鼠标经过柱子颜色
      emphasis: {
        itemStyle: {
          color: "#254065",
        },
      },
      // 工具提示隐藏
      tooltip: {
        extraCssText: "opacity:0",
      },
    };
    let option = {
      // 工具提示
      tooltip: {
        trigger: "item",
        // 轴触发提示才有效
        // axisPointer: {
        //   // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
        //   type: "shadow",
        // },
      },
      // 图表边界控制
      grid: {
        // 距离 上右下左 的距离
        top: "3%",
        right: "3%",
        bottom: "3%",
        left: "0%",
        // 是否包含文本
        containLabel: true,
        show: true,
        borderColor: "rgba(0, 240, 255, 0.3)",
      },
      // 控制x轴
      xAxis: [
        {
          // 使用类目，必须有data属性
          type: "category",
          // 使用 data 中的数据设为刻度文字
          // xAxis
          data: [
            "上海",
            "广州",
            "北京",
            "深圳",
            "合肥",
            "",
            "......",
            "",
            "杭州",
            "厦门",
            "济南",
            "成都",
            "重庆",
          ],
          // 刻度设置
          axisTick: {
            // true意思：图形在刻度中间
            // false意思：图形在刻度之间
            alignWithLabel: false,
            show: false,
          },
          // x坐标轴文字标签样式设置
          axisLabel: {
            color: "#4c9bfd",
          },
          // x坐标轴颜色设置
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
            },
          },
        },
      ],
      // 控制y轴
      yAxis: [
        {
          // 使用数据的值设为刻度文字
          type: "value",
          // 刻度设置
          axisTick: {
            // true意思：图形在刻度中间
            // false意思：图形在刻度之间
            alignWithLabel: false,
            show: false,
          },
          axisLabel: {
            color: "#4c9bfd",
          },
          // y轴 分割线的样式
          splitLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
            },
          },
        },
      ],

      series: [
        {
          // 图表数据名称
          name: "用户统计",
          // 图表类型
          type: "bar",
          // 柱子宽度
          barWidth: "60%",
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#00fffb" },
              { offset: 1, color: "#0061ce" },
            ]),
          },
          // 数据
          data: [
            2100,
            1900,
            1700,
            1560,
            1400,
            item,
            item,
            item,
            900,
            750,
            600,
            480,
            240,
          ],
        },
      ],
    };
    this.renderEchart("usersBar", option);
    this.lineChart = this.renderEchart("lineChart", this.lineOption);
    // this.handleSalesClick(this.sales[2]);
    this.swap();
    // console.log(chinaJson);
    // this.$echarts.registerMap("china", chinaJson, {});
    // let map = this.$echarts.getMap("china");
    // console.log(map);
    console.log(mapOption);
    this.renderEchart("geo", mapOption);
  },
  methods: {
    renderPonitPie(id) {
      let echarts = this.$echarts;
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        series: {
          name: "点位统计",
          type: "pie",
          radius: ["10%", "70%"],
          center: ["50%", "50%"],
          roseType: "radius",
          label: {
            // show: false,
            fonySize: 10,
          },
          labelLine: {
            length: 6,
            length2: 8,
          },
          data: [
            {
              value: 20,
              name: "云南",
              label: {
                color: "#006cff",
              },
            },
            {
              value: 26,
              name: "北京",
              label: {
                color: "#ed8884",
              },
            },
            {
              value: 24,
              name: "山东",
              label: {
                color: "#006cff",
              },
            },
            {
              value: 25,
              name: "河北",
              label: {
                color: "#ff9f7f",
              },
            },
            {
              value: 20,
              name: "江苏",
              label: {
                color: "#0096ff",
              },
            },
            {
              value: 25,
              name: "浙江",
              label: {
                color: "#9fe6b8",
              },
            },
            {
              value: 30,
              name: "四川",
              label: {
                color: "#32c5e9",
              },
            },
            {
              value: 42,
              name: "湖北",
              label: {
                color: "#1d9dff",
              },
            },
          ],
        },
      };
      option && myChart.setOption(option);

      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    renderEchart(id, option) {
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      option && myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      return myChart;
    },
    handleSalesClick(item) {
      this.active = item.title;
      this.lineOption.xAxis.data = item.data.x;
      this.lineOption.series[0].data = item.data.value1;
      this.lineOption.series[1].data = item.data.value2;
      this.lineChart.setOption(this.lineOption);
    },
    swap() {
      var i = 0;
      setInterval(() => {
        this.handleSalesClick(this.sales[i]);
        i++;
        if (i > 3) i = 0;
      }, 1000);
    },
  },
};
</script>

<style lang="less">
#app {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  min-height: 780px;
  margin: 0 auto;
  padding: 1.625rem 0.833rem 0;
  background: url("./assets/images/logo.png") no-repeat 0 0 / contain;
  .column {
    // flex-grow: 3;
    position: relative;
    width: 30%;
    box-sizing: border-box;
    // background-color: darkolivegreen;
    &:nth-child(2) {
      // flex-grow: 4;
      width: 40%;
      margin: 0.4rem 0.25rem 0;
    }
    .overview {
      height: 1.375rem;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          h4 {
            font-size: 0.35rem;
            color: #fff;
            margin: 0 0 0.1rem 0.06rem;
          }
          span {
            font-size: 0.2rem;
            color: #4c9bfd;
          }
        }
      }
    }
    .monitor {
      height: 6rem;
    }
    .point {
      height: 4.25rem /* 340/80 */;
      .chart {
        display: flex;
        margin-top: 0.3rem;
        justify-content: space-between;
        .pie {
          width: 3.9rem;
          height: 3rem;
          margin-left: -0.125rem;
          // background-color: pink;s
        }
        .data {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 2.1rem;
          padding: 0.45rem 0.375rem;
          box-sizing: border-box;
          background-image: url("./assets/images/rect.png");
          background-size: cover;
          .item {
            h4 {
              margin-bottom: 0.15rem;
              font-size: 0.35rem;
              color: #fff;
            }
            span {
              display: block;
              color: #4c9bfd;
              font-size: 0.2rem;
            }
          }
        }
      }
    }
    /* 地图  */
    .map {
      height: 7.225rem;
      margin-bottom: 0.25rem;
      display: flex;
      flex-direction: column;
      h3 {
        line-height: 1;
        padding: 0.2rem 0;
        margin: 0;
        font-size: 0.25rem;
        color: #fff;
        font-weight: 400;
      }
      .icon-cube {
        color: #68d8fe;
      }
      .map .chart {
        flex: 1;
        background-color: rgba(255, 255, 255, 0.05);
      }
      .geo {
        width: 100%;
        height: 100%;
      }
    }
    .users {
      height: 4.25rem;
      display: flex;
      .chart {
        display: flex;
        margin-top: 0.3rem;
        .bar {
          width: 7.35rem;
          height: 3rem;
        }
        .data {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 2.1rem;
          padding: 0.45rem 0.375rem;
          box-sizing: border-box;
          background-image: url("./assets/images/rect.png");
          background-size: cover;
          .item {
            h4 {
              margin-bottom: 0.15rem;
              font-size: 0.35rem;
              color: #fff;
            }
            span {
              display: block;
              color: #4c9bfd;
              font-size: 0.2rem;
            }
          }
        }
      }
    }
    .order {
      height: 1.857rem;
    }
    .sales {
      height: 3.1rem;
      box-sizing: border-box;
      .inner {
        display: flex;
        flex-direction: column;
        .caption {
          display: flex;
          line-height: 1;
          h3 {
            height: 0.225rem;
            padding-right: 0.225rem;
            border-right: 0.025rem solid #00f2f1;
          }
          a {
            padding: 0.05rem;
            font-size: 0.2rem;
            margin: -0.0375rem 0 0 0.2625rem;
            border-radius: 0.0375rem;
            color: #0bace6;
          }
          .active {
            background-color: #4c9bfd;
            color: #fff;
          }
        }
        .chart {
          flex: 1;
          padding-top: 0.1875rem;
          position: relative;
          .label {
            position: absolute;
            left: 0.525rem;
            top: 0.225rem;
            color: #4996f5;
            font-size: 0.175rem;
          }
          .line {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .wrap {
      display: flex;
      width: 100%;
      box-sizing: border-box;
    }
  }
}
</style>
